<template>
<div id="app">
    <div class="login-box">
        <h2>管理员登录</h2>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="adminName">
                <el-input v-model="ruleForm.adminName" placeholder="账号"></el-input>
            </el-form-item>

            <el-form-item prop="adminPassword">
                <el-input type="password" v-model="ruleForm.adminPassword" placeholder="密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="submitForm">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            ruleForm: {
                adminName: 'admin',
                adminPassword: '123456'
            },
            rules: {
                adminName: [
                    { required: true, message: '请输入管理员名称', trigger: 'blur' }
                ],
                adminPassword: [
                    { required: true, message: '请输入管理员密码', trigger: 'blur' }
                ]
            }
        }
    },

    methods: {
        submitForm () {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.ruleForm))
                    this.$store.dispatch('adminLogin', params).then(res => {
                        if (res.code === 200) {
                            this.$message({ type: 'success', message: res.msg })
                            this.$router.push({ path: '/' })
                        } else {
                            this.$message({ type: 'error', message: res.msg })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="scss">
.login-box {
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    background: transparent;
    border-radius: 10px;
    h2 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;
    }
    .el-form {
        .el-form-item {
            text-align: center;
            .el-button {
                width: 50%;
                background: #393d49;
                color: #fff;
            }
        }
    }
}
</style>
